<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'

// 使用 import 导入 assets 目录中的图片
// import image222 from '@/assets/222.png'
// import image223 from '@/assets/223.png'
// import image225 from '@/assets/225.png'
// import image226 from '@/assets/226.png'

import { getIcon } from '@/api/assets/assets';

const image222 = ref<string | undefined>(undefined)
const image223 = ref<string | undefined>(undefined)
const image225 = ref<string | undefined>(undefined)
const image226 = ref<string | undefined>(undefined)

const fetchIcon = async () => {
  try {
    const data = await getIcon(['222.png', '223.png', '225.png', '226.png'])
    image222.value = data['222.png']
    image223.value = data['223.png']
    image225.value = data['225.png']
    image226.value = data['226.png']
  }
  catch (error) {
    console.error('API 调用错误:', error)
    // message.error('无法获取用户信息，请稍后重试。');
  }
}

onMounted(() => {
  fetchIcon()
})

// 卡片数据
const cards = computed(() => [
  {
    title: '知识问答',
    text: '上传文档、音频、视频、图片等文件，可与文件进行对话，速览关键信息。',
    image: image225.value,
  },
  {
    title: '内容创作',
    text: '根据提供的主题和关键词，智能生成高质量的文章、博客或报告，帮助快速完成创作任务，节省时间和精力。',
    image: image222.value,
  },
  {
    title: 'LOGO制作',
    text: '提供品牌形象设计建议，智能化生成多种Logo设计方案，帮助快速选择到符合品牌形象的标志，提升品牌识别度。',
    image: image226.value,
  },
  {
    title: 'PPT生成',
    text: '输入主题和大纲，智能生成结构清晰、视觉效果优秀的PPT演示文稿，提升展示效果，让创意走上台前。',
    image: image223.value,
  },
])
</script>

<template>
  <div class="assistant-section">
    <div class="section-header">
      <div class="line left-line" />
      <h2 class="title">
        智能对话助手
      </h2>
      <div class="line right-line" />
    </div>
    <div class="description">
      <p>即时解答疑问，提供创意灵感，助力学生轻松应对创新创业挑战。</p>
    </div>
    <div class="card-container">
      <div v-for="(card, index) in cards" :key="index" class="card">
        <div class="card-content">
          <h3 class="card-title">
            {{ card.title }}
          </h3>
          <p class="card-text">
            {{ card.text }}
          </p>
        </div>
        <img :src="card.image" :alt="`Image ${index + 1}`" class="card-image">
      </div>
    </div>
  </div>
</template>

<style scoped>
.assistant-section {
  width: 103%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 2.5rem;
  /* 40px */
  padding-bottom: 2.5rem;
  margin-top: -12rem;
  /* -192px */
  background-image: url('@/assets/411.png');
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  /* 20px */
}

.line {
  width: 7rem;
  /* 112px */
  height: 0;
  border-width: 1px;
  border-style: solid;
  opacity: 1;
}

.left-line {
  margin-right: 1.25rem;
  /* 20px */
  border-image-source: linear-gradient(270deg, rgba(102, 102, 102, 0) 0%, #000000 100%);
  border-image-slice: 1;
  transform: rotate(180deg);
}

.right-line {
  margin-left: 1.25rem;
  /* 20px */
  border-image-source: linear-gradient(270deg, #000000 0%, rgba(102, 102, 102, 0) 100%);
  border-image-slice: 1;
  transform: rotate(180deg);
}

.title {
  font-weight: 700;
  font-size: 2.25rem;
  /* 36px */
  line-height: 2.5rem;
  /* 40px */
  color: #1F2937;
  white-space: nowrap;
  margin-bottom: 1.25rem;
  /* 20px */
  font-family: 'Alimama ShuHeiTi', sans-serif;
}

.description {
  font-size: 1rem;
  /* 16px */
  font-weight: 400;
  line-height: 1.5rem;
  /* 24px */
  color: #6B7280;
  text-align: center;
  width: 24rem;
  /* 384px */
  margin-top: 0.5rem;
  /* 8px */
  margin-bottom: 3rem;
  /* 48px */
  font-family: 'Alibaba PuHuiTi', sans-serif;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  /* 20px */
}

.card {
  width: 620px;
  height: 280px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.6), rgba(191, 219, 254, 0.6));
  border-width: 1.5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.4);
  border-image-source: linear-gradient(180deg, rgba(152, 193, 246, 0.4) 0%, rgba(215, 227, 244, 0.4) 100%);
  border-image-slice: 1;
  border-radius: 0.75rem;
  /* 12px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem;
  /* 20px */
}

.card-image {
  width: 280px;
  height: 280px;
}

.card-content {
  flex: 1;
  padding-right: 1.25rem;
  /* 20px */
}

.card-title {
  font-weight: 700;
  font-size: 1.5rem;
  /* 24px */
  line-height: 2rem;
  /* 32px */
  color: #4B79DB;
  margin-bottom: 0.5rem;
  /* 8px */
  margin-left: 0.5rem;
  /* 8px */
  font-family: 'Alibaba PuHuiTi', sans-serif;
}

.card-text {
  font-size: 1rem;
  /* 16px */
  font-weight: 400;
  line-height: 1.5rem;
  /* 24px */
  color: #000000;
  margin-left: 0.5rem;
  /* 8px */
  font-family: 'Alibaba PuHuiTi', sans-serif;
}
</style>
